import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './footerContent.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import eyeIcon from '@/assets/image/index/eye.png';

type ITopProps = T.IProps & T.ITopProps;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {};
  }

  render() {
    let {
      main: {contentList, communityName, unReadNum},
      actions: {action},
    } = this.props;
    return (
      <>
        {contentList.length > 0 &&
          contentList.map((item, index) => {
            return (
              <View key={item.id} style={{backgroundColor: '#ffffff', padding: '0 30rpx 30rpx 30rpx'}}>
                <View
                  className="footerContentBox"
                  onClick={() => {
                    const newcontentList = JSON.parse(JSON.stringify(contentList));
                    const newItem = newcontentList.find((e) => e.id === item.id);
                    newItem.numberOfViewers++;
                    action.commonChange('main.contentList', newcontentList);
                    if (Taro.getStorageSync('blacklistModel')) {
                      action.commonChange('main.blacklistModel', true);
                      return;
                    }
                    Taro.navigateTo({
                      url: `/pages/package-C/article-detail/index?id=${item.id}`,
                    });
                  }}
                >
                  <View className="footerContentTop">
                    <View className="topBox">
                      <View></View>
                      <View className="visits">
                        <Image src={eyeIcon} className="eyeIcon" mode="widthFix" />
                        <View className="number">{item.numberOfViewers}</View>
                      </View>
                    </View>
                    <View className="activityTitle">{item.activityTitle}</View>
                  </View>
                  <Image src={item.activityImageUrl} className="footerContentBg" mode="widthFix" />
                  <View className="subtitle">{item.subtitle}</View>
                </View>
              </View>
            );
          })}
      </>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
